import {PageContainer} from '@ant-design/pro-components';
import {useModel} from '@umijs/max';
import {Button, Card, Form, Input, message, Select, Space, Upload} from 'antd';
import React from 'react';
import {UploadOutlined} from "@ant-design/icons";
import {analysisAskAsyncByPost} from "@/services/ant-design-pro/api";

/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const normFile = (e: any) => {
  console.log('Upload event:', e);
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};

const AnalysisAsync: React.FC = () => {
  const { initialState } = useModel('@@initialState');

  const onFinish = async (values: any) => {
    // 发起请求
    const res = await analysisAskAsyncByPost({
      ...values,
      uploadUserId: '1',
      upload: undefined,
      file: values.upload[0].originFileObj
    })
    if (res.code === 200) {
      // 访问成功
      message.success('图表异步生成中！请在图表中心查看');
    }
  };

  return (
    <PageContainer>
      <Card
        style={{
          borderRadius: 8,
        }}
        bodyStyle={{
          backgroundImage:
            initialState?.settings?.navTheme === 'realDark'
              ? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
              : 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
        }}
      >
        <Form
          name="validate_other"
          {...formItemLayout}
          onFinish={onFinish}
          style={{ maxWidth: 600 }}
        >

          <Form.Item
            {...formItemLayout}
            name="chartName"
            label="图表名称"
            rules={[{ required: true, message: '请输入图表名称' }]}
          >
            <Input placeholder="请输入图表名称" />
          </Form.Item>
          <Form.Item
            name="chartType"
            label="图表类型"
            rules={[{ required: false, message: '请选择图表类型' }]}
          >
            <Select placeholder="请选择图表类型">
              <Option value="柱状图">柱状图</Option>
              <Option value="折线图">折线图</Option>
              <Option value="饼图">饼图</Option>
              <Option value="堆叠图">堆叠图</Option>
            </Select>
          </Form.Item>
          <Form.Item name='goal' label="分析目标">
            <Input.TextArea />
          </Form.Item>
          <Form.Item
            name="upload"
            label="数据上传"
            valuePropName="fileList"
            getValueFromEvent={normFile}
          >
            <Upload name="logo">
              <Button icon={<UploadOutlined />}>点我上传</Button>
            </Upload>
          </Form.Item>
          <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
              <Button htmlType="reset">重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
      <Card
        style={{
          borderRadius: 8,
        }}
        bodyStyle={{
          backgroundImage:
            initialState?.settings?.navTheme === 'realDark'
              ? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
              : 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
        }}
      >
      </Card>
    </PageContainer>
  );
};

export default AnalysisAsync;
